<template>
  <div class="container">
    <div class="title" style="margin-left: 38px">
      <img src="./images/标题2.png" alt="标题" height="40px">
    </div>
<!--    <div class="Search ">-->
<!--      <el-input-->
<!--          placeholder="搜索任何需要的菜品"-->
<!--          v-model="input"-->
<!--          style="width: 400px"-->
<!--          clearable>-->
<!--      </el-input>-->
<!--      <el-button  type="primary" icon="el-icon-search" style="background-color: green; margin-left: 10px" @click="search" >搜索</el-button>-->
<!--    </div>-->
    <div class="quitt">
      <el-dropdown size="medium" placement="bottom">
          <span class="demonstration">
                  <img src="./images/个人中心.jpg" alt="" style="height: 50px;">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user"><span @click="Information"> 个人中心</span></el-dropdown-item>
          <el-dropdown-item icon="el-icon-error"><span @click="logout"> 退出登录</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import request from "@/utils/request";
import store from "@/store"
export default {
  data() {
    return {
      input: ''
    }
  },
  methods: {
    logout() {

      request.post("user/logout")
          .then(res => {
            if (res.data.code === 1) {
              this.$router.push('/')
              console.log(store.state.app.currentUserId)
              console.log(localStorage.getItem(store.state.app.currentUserId))
              localStorage.removeItem(store.state.app.currentUserId)
              console.log(localStorage.getItem(store.state.app.currentUserId))
              sessionStorage.removeItem('app.currentUserId')
              sessionStorage.removeItem('app.username')
              sessionStorage.removeItem('app.permissions')
            } else if (res.data.code === 0) {
              this.$message({
                message: res.msg,
                type: "error"
              })
            }
          }).catch(error => {
        this.$router.push('/')
      })
    },
    search() {
      if (this.input === '') {
        alert('无搜索内容')
      } else {
        axios.get("/dish/search", {
          params: {
            input: this.input
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
            .then(res => {
              if (res.data.length === 0) {
                alert("未找到菜品")
              } else {
                this.$router.push({
                  path: '/search',
                  query: {
                    dishes: res.data
                  }
                })
                this.input = ''
              }
            })
            .catch(err => {
              alert('请求失败')
            })
      }
    },
    Information() {
      this.$router.push('/personalInformation')
    }
  },
}
</script>

<style scoped>
.container {
  background-color: rgb(255, 255, 255);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: #d8dcdf solid 6px;
}

.title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 30px;
  font-weight: bold;
  flex: 1;

}

.title img {
  margin-top: 20px;
}

.Search {
  margin-top: 24px;
  flex: 7;
}

.quitt {
  margin-top: 24px;
  flex: 1;
  text-align: right;
  margin-right: 40px;
}


</style>
